<link rel="stylesheet" href="<?= base_url() ?>assets/jqx/jqwidgets/styles/jqx.base.css" type="text/css" />
<!--<script type="text/javascript" src="<?= base_url() ?>assets/jqx/scripts/jquery-1.11.1.min.js"></script>-->
<script type="text/javascript" src="<?= base_url() ?>assets/jqx/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/jqx/jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/jqx/jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/jqx/jqwidgets/jqxdata.js"></script>

<!-- Content -->
<div id="content">

    <!-- Content wrapper -->
    <div class="wrapper">

        <!-- Breadcrumbs line -->
        <div class="crumbs">
            <ul id="breadcrumbs" class="breadcrumb"> 
                <li><a href="#">Panel</a></li>
                <li class="active"><a href="<?= base_url('panel') ?>" title="">Inicio</a></li>
            </ul>
        </div>
        <!-- /breadcrumbs line -->

        <!-- Page header -->
        <div class="page-header">
            <div class="page-title">
                <h5>Panel Aramara</h5>
                <span>CIEMPIESS-UNAM</span>
            </div>
        </div>
        <!-- /page header -->

        <!-- Action tabs -->
        <div class="actions-wrapper">
            <div class="actions">

                <div id="user-stats">
                    <ul class="round-buttons">
                        <li><div class="depth"><a href="<?= base_url('colaborador/menu/agregar') ?>" title="Nuevo Colaborador" class="tip"><i class="icon-plus"></i></a></div></li>
                        <li><div class="depth"><a href="<?= base_url('noticias/menu/agregar') ?>" title="Nueva Noticia" class="tip"><i class="icon-bullhorn"></i></a></div></li>
                        <li><div class="depth"><a href="<?= base_url('descargas/menu/modificar') ?>" title="Editar Descarga" class="tip"><i class="icon-download"></i></a></div></li>
                        <li><div class="depth"><a href="<?= base_url('resources/menu/agregar') ?>" title="Agregar Recurso" class="tip"><i class="icon-globe"></i></a></div></li>
                        <li><div class="depth"><a href="<?= base_url('portada/menu/editar_intro') ?>" title="Editar Portada" class="tip"><i class="icon-eye-open"></i></a></div></li>
                    </ul>
                </div>

                <ul class="action-tabs">
                    <li><a href="#user-stats" title="">Quick actions</a></li>
                </ul>
            </div>
        </div>
        <!-- /action tabs -->

        <!-- Grid widgets -->
        <div class="row-fluid">
            <div class="span6">
                <div class="widget">
                    <div class="navbar"><div class="navbar-inner"><h6>Colaboradores por carrera</h6></div></div>
                    <div class="well body">
                        <div id="colab_carrera" style="width: 100%; height: 600px;" ></div>
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="widget">
                    <div class="navbar"><div class="navbar-inner"><h6>Colaboradores por rol</h6></div></div>
                    <div class="well body">
                        <div id="colab_rol" style="width: 100%; height: 600px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /grid widgets -->

    </div>
    <!-- /content wrapper -->

</div>
<!-- /content -->


<script type="text/javascript">
    $(document).ready(function () {
        // prepare chart data as an array
        var sampleData = [<?= $colaboradores_por_carrera ?>];

        // prepare jqxChart settings
        var settings = {
            title: "",
            description: "",
            enableAnimations: true,
            showLegend: true,
            showBorderLine: false,
            legendLayout: {left: 0, top: 0, width: 300, height: 400, flow: 'vertical'},
            padding: {left: 5, top: 5, right: 5, bottom: 5},
            titlePadding: {left: 0, top: 0, right: 0, bottom: 10},
            source: sampleData,
            colorScheme: 'scheme05',
            seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                    [
                                        {
                                            dataField: 'Porcentaje',
                                            displayText: 'Carrera',
                                            labelRadius: 170,
                                            initialAngle: 15,
                                            radius: 200,
                                            centerOffset: 0,
                                            formatFunction: function (value) {
                                                if (isNaN(value))
                                                    return value;
                                                return parseFloat(value) + '%';
                                            },
                                        }
                                    ]
                        }
                    ]
        };

        // setup the chart
        $('#colab_carrera').jqxChart(settings);
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        // prepare chart data as an array
        var sampleData = [<?= $colaboradores_por_rol ?>];

        // prepare jqxChart settings
        var settings = {
            title: "",
            description: "",
            enableAnimations: true,
            showLegend: true,
            showBorderLine: false,
            legendLayout: {left: 0, top: 0, width: 300, height: 400, flow: 'vertical'},
            padding: {left: 5, top: 5, right: 5, bottom: 5},
            titlePadding: {left: 0, top: 0, right: 0, bottom: 10},
            source: sampleData,
            colorScheme: 'scheme04',
            seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                    [
                                        {
                                            dataField: 'Porcentaje',
                                            displayText: 'Rol',
                                            labelRadius: 170,
                                            initialAngle: 15,
                                            radius: 200,
                                            centerOffset: 0,
                                            formatFunction: function (value) {
                                                if (isNaN(value))
                                                    return value;
                                                return parseFloat(value) + '%';
                                            },
                                        }
                                    ]
                        }
                    ]
        };

        // setup the chart
        $('#colab_rol').jqxChart(settings);
    });
</script>
